import { Button, Table, Icon } from "view-ui-plus";
import { defineComponent, ref, nextTick } from "vue";
import CommonModal from "@/components/common-modal";
import { VxeForm } from "vxe-table";

export default defineComponent({
  props: {
    modelValue: {
      type: Array,
      dafault: () => [],
    },
    listItems: {
      type: Array,
      dafault: () => [],
    },
    ruleValidate: {
      type: Object,
      dafault: () => {},
    },
    isDetail: {
      type: Boolean,
      dafault: false,
    },
  },
  emits: ["update:modelValue", "change"],
  setup(props, { emit, slots }) {
    const show = ref(false);

    const loading = ref(true);

    const form = ref(null);

    const isEdit = ref(false);

    const selectIndex = ref();

    const columns: any = props.listItems.map((item: any, i) => {
      return {
        title: item.title,
        key: item.field,
      };
    });

    if (!props.isDetail) {
      columns.push({
        title: "操作",
        key: "action",
        slot: "action",
        width: 160,
      });
    }

    let values = {};
    props.listItems.forEach((el: any) => {
      values[el.field] = "";
    });
    const formValidate = ref(values);

    const onOnVisibleChange = (visible) => {
      if (visible) {
      }
    };

    const onOk = () => {
      form.value.validate((errMap) => {
        if (errMap) {
          form.value.validate();
          loading.value = false;
          nextTick(() => {
            loading.value = true;
          });
        } else {
          if (isEdit.value) {
            const modelValue = props.modelValue || [];
            modelValue.splice(selectIndex.value, 1, { ...formValidate.value });
            emit("update:modelValue", modelValue);
          } else {
            const modelValue = props.modelValue || [];
            const list = [...modelValue, { ...formValidate.value }];
            emit("update:modelValue", list);
          }
          emit("change");
          form.value.reset();
          show.value = false;
        }
      });
    };

    const onCancel = () => {
      form.value.reset();
      show.value = false;
    };

    const addClick = () => {
      isEdit.value = false;
      show.value = true;
    };

    const onDel = (row: any, index: number) => {
      const modelValue = props.modelValue || [];
      modelValue.splice(index, 1);
      emit("update:modelValue", [...modelValue]);
      emit("change");
    };

    const onEdit = (row, index) => {
      const editValue = {};
      Object.keys(values).forEach((key: any) => {
        editValue[key] = row[key];
      });
      formValidate.value = editValue;
      selectIndex.value = index;
      isEdit.value = true;
      show.value = true;
    };

    const renderAction = ({ row, index }) => {
      return (
        <span>
          <a type="text" onClick={() => onDel(row, index)}>
            <Icon type="md-trash" color={"red"} />
            <span style={{ color: "red" }}>删除</span>
          </a>
          <a
            type="text"
            onClick={() => onEdit(row, index)}
            style={{ marginLeft: "10px" }}
          >
            <Icon type="md-create" />
            <span>编辑</span>
          </a>
        </span>
      );
    };

    return () => {
      return (
        <div style={{ textAlign: "center" }}>
          <Table
            columns={columns}
            data={props.modelValue}
            border
            v-slots={{ action: renderAction } as any}
          />
          {!props.isDetail && (
            <Button
              type="primary"
              icon={"ios-add"}
              onClick={addClick}
              style={{ marginTop: "10px" }}
            >
              添加
            </Button>
          )}
          <CommonModal
            model-value={show.value}
            onOnOk={onOk}
            onOnCancel={onCancel}
            loading={loading.value}
            width={800}
            onOnVisibleChange={onOnVisibleChange}
          >
            <VxeForm
              title-colon
              ref={form}
              title-width="100"
              titleAlign="right"
              data={formValidate.value}
              rules={props.ruleValidate}
              span={24}
              items={props.listItems}
            />
          </CommonModal>
        </div>
      );
    };
  },
});
